<template>
	<view class="business">
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>供应商账号</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入供应商账号" maxlength="10"
					onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" v-model="username"
					placeholder-class="inputColor" :disabled="is_bind">
			</view>
		</view>
		<view class="inputlist" v-if="!is_bind">
			<view class="left">
				<text class="hx"></text>
				<text>供应商密码</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入密码" password="true" v-model="password" placeholder-class="inputColor"
					:disabled="is_bind">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx"></text>
				<text>昵称</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入昵称"
					onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" v-model="name"
					placeholder-class="inputColor" :disabled="is_bind">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>联系方式</text>
			</view>
			<view class="right">
				<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phone" placeholder-class="inputColor"
					:disabled="is_bind">
			</view>
		</view>
		<view class="btn" v-if="!is_bind">
			<button class="btn_sumbit" @click="bind_supplier" :loading="is_loading"
				:disabled="is_loading">绑定供应商</button>
		</view>
		<view class="btn" v-if="is_bind && status == 1">
			<button class="btn_sumbit">已成为供应商</button>
		</view>
		<view class="btn" v-if="is_bind && status == 0">
			<button class="btn_sumbit">供应商被冻结</button>
		</view>

		<view class="btn" v-else-if="is_bind && status == 3">
			<button class="btn_sumbit">商家被撤销</button>
		</view>
		<view class="btn" v-else-if="is_bind">
			<text>供应商后台：{{url}}</text>
		</view>
	</view>


</template>

<script>
	import {
		ShopInfo,
		BindSupplier
	} from "@/api/user.js"
	export default {
		data() {
			return {
				username: '',
				name: '',
				password: '',
				phone: '',
				is_bind: false,
				status: 0,
				is_loading: false,
				supplier: [],
				url: ''
			}
		},
		onLoad() {
			this.ShopInfo()
		},
		onShow() {

		},
		methods: {
			ShopInfo() {
				ShopInfo().then(res => {
					if (res.status == 0) {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: (data) => {
								uni.switchTab({
									url: '/pages/tabBar/user/user'
								})
							}

						})
					} else {
						this.url = res.data.supplier_url
						if (res.data.supplier != '') {
							this.username = res.data.supplier.username
							this.name = res.data.supplier.name
							this.phone = res.data.supplier.phone

							if (res.data.supplier.status == 1) {
								this.is_bind = true
								this.status = 1
							} else if (res.data.supplier.status == 0) {
								this.is_bind = true
								this.status = 0
							} else if (res.data.supplier.status == 3) {
								this.is_bind = true
								this.status = 3
							}
						}
					}

				})
			},
			bind_supplier() {
				if (this.username == '' || this.name == '' || this.phone == '' || this.password == '') {
					uni.showToast({
						title: '请输入信息',
						icon: "none"
					})
					return false
				}
				this.is_loading = true
				BindSupplier({
					username: this.username,
					name: this.name,
					password: this.password,
					phone: this.phone
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.status == 1) {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabBar/user/user'
							})
						}, 1000)
					} else {
						this.is_loading = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.business {
		padding-bottom: 20px;
	}

	.btn {
		margin: 15px 0;

		.btn_sumbit {
			background: #ff3939;
			color: #fff;
			width: 80%;
			font-size: 14px;
			box-sizing: border-box;
		}
	}

	.imgbox {
		font-size: 14px;
		padding: 10px;
		background-color: #fff;

		image {
			margin-top: 10px;
			width: 100px;
		}
	}

	.inputlist {
		background-color: #fff;
		display: flex;
		font-size: 14px;
		padding: 10px;
		border-bottom: 1px solid #eee;

		.left {
			width: 30%;
			display: flex;

			.hx {
				display: block;
				width: 5px;
				color: red;
				margin-right: 3px;
			}
		}

		.right {
			width: 70%;

			input {
				font-size: 14px;
				color: #000;
			}

			.inputColor {
				color: #ccc;
			}


		}
	}
</style>
